<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			.box1 {
				width: 180px;
				height: 300px;
				background-color: pink;
				/* 边框: 大小 颜色 线的类型*/
				/* solid  实线
					dashed  虚线
					dotted  点状线
				 */
				border: 5px blue dotted;
				/* 内边距 */
				padding: 15px;
				/* 外边距 */
				margin: 30px;
			}
			.box2 {
				width: 180px;
				height: 300px;
				background-color: lightblue;
				/* 单独控制某一个方向的边框 */
				border-top: 5px red solid;
				border-bottom: 5px blue dashed;
				border-left: 10px green dotted;
				border-right: 10px green dotted;
				/* 单独控制某一个方向的内边距 */
				padding-left: 20px;
				padding-top: 10px;
				/* 单独控制某一个方向的外边距 */
				margin-left: 50px;
				margin-top: 20px;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, quis consectetur porro iste sed impedit nesciunt quam, magni sapiente molestiae esse velit accusamus veritatis, explicabo placeat ducimus provident necessitatibus vitae.
		</div>
		<div class="box2">这是第二个盒子</div>
	</body>
</html>